<template>
	<view class="ts-column ts-flex-item">

		<view class="store-images-swiper-box">
			<swiper autoplay interval="3000" circular :indicator-dots="true">
				<swiper-item v-for="(img,index) in storeInfo.images" :key="index">
					<view class="store-images-img-box">
						<view class="store-images-img">
							<image :src="img"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<ts-search-bar :readonly="true" @tap="gotoSearch"></ts-search-bar>


		<view class="ts-gap"></view>

		<view class="ts-row">
			<navigator url="store-hot" hover-class="navigator-hover" class="ts-flex-item">
				<view class="ts-column ts-flex-item  ts-center ts-padding">
					<image style="width: 80upx; height: 80upx;" src="../../static/icon.png"></image>
					<text>店长推荐</text>
				</view>
			</navigator>
			
		</view>

		<view class="ts-gap"></view>

		<view class="ts-list-cell" hover-class="ts-list-cell-hover" @tap="navigateTo('order?tab=0')">
			<view class="ts-list-cell-navigate ts-navigate-right ts-navigate-badge">
				订单中心
				<ts-badge text="查看全部订单" type="default" inverted></ts-badge>
			</view>
		</view>

		

		<view class="ts-gap"></view>
		<view class="ts-column ts-padding">
			<text class="ts-h4 ts-text-bold">{{storeInfo.name}}</text>
			<text class="ts-h5 ts-padding-top">距离我{{formatedDistance}}</text>
		</view>
		<view class="ts-list">
			<view class="ts-list-cell" @tap="openLocation">
				<view class="ts-list-cell-navigate ts-navigate-right ts-navigate-badge">
					{{storeInfo.address}}
					<ts-badge text="导航" :inverted="true"></ts-badge>
				</view>
			</view>
			<view class="ts-list-cell" @tap="callTelphone(storeInfo.contact)">
				<view class="ts-list-cell-navigate ts-navigate-right ts-navigate-badge">
					订货电话:{{storeInfo.contact}}
					<ts-badge text="拨打电话" :inverted="true"></ts-badge>
				</view>
			</view>
		</view>

		<view class="ts-gap"></view>
		<view class="ts-column ts-padding">
			<view class="ts-center ts-h4 ts-text-bold ts-padding" style="height: 50upx;">商户介绍</view>
			<text class="ts-h4">{{storeInfo.open_time}}</text>
			<text class="ts-h6 ts-padding-top">{{storeInfo.service}}</text>
			<text class="ts-h5 ts-padding-top">{{storeInfo.extract_service}}</text>			
		</view>
		<ts-banner :image="storeInfo.cover_image" height="350"></ts-banner>

	

		<view class="ts-gap"></view>
		<view class="ts-list">
			<view class="ts-list-cell">
				<view class="ts-list-cell-navigate ts-navigate-right ts-navigate-badge">
					店长推荐					
				</view>
			</view>
		</view>

		<block v-for="(item,index) in recomentList" :key="index">
			<navigator :url="'detail?store_id='+item.store_id+'&product_id='+item.product_id" hover-class="navigator-hover">
				<view class="ts-column ts-flex- ts-padding">
					<view class="ts-center" style="height: 350upx; width: 100%;">
						<image style="width: 100%; height: 100%;" :src="item.rect_img"></image>
					</view>
					<view class="ts-h4 ts-padding-top">{{item.title}}</view>
					<view class="ts-padding-top" style="align-items: center;">
						<view class="ts-text-bold ts-text-danger ts-h4">￥{{item.price/100}}</view>
						<view class="ts-text-discount ts-padding-left ts-h5">￥{{item.origin_price/100}}</view>
					</view>
				</view>
			</navigator>
		</block>

		<view class="ts-gap"></view>
		<view class="ts-column">
			<ts-load-more :loadingType="loadingType" :contentText="contentText" @tap="getRecomentProductListInStore"></ts-load-more>
		</view>

	</view>
</template>

<script>
	import tsBanner from '@/components/teaset/components/ts-banner.vue';
	import tsSearchBar from '@/components/teaset/components/ts-search-bar.vue';
	import {
		mapUtils
	} from '@/common/util.js'


	export default {
		components: {
			tsBanner,
			tsSearchBar
		},
		data() {return  {
			loadingType: 0,
			page: 0,
			recomentList: [],

			storeId: 0,
			storeInfo: {
				location: {}
			},
			//113.369397,22.910512
			// 			latitude: 22.910512,
			// 			longitude: 113.369397,
			distance: 0,
		}},
		computed: {
			storeUrl() {
				return `store-tab-top?store_id=${this.storeId}`;
			},
			formatedDistance() {
				if (this.distance > 1000) {
					return (this.distance / 1000).toFixed(2) + '公里'
				} else {
					return Math.round(this.distance) + '米'
				}
			}
		},
		onLoad(e) {
			this.storeId = e.store_id || 0;
			this.loadStoreInfo();
			this.getRecomentProductListInStore();
		},
		onShow() {
			this.getDistance(); //计算距离当前位置的距离
		},
		onReachBottom() {
			this.getRecomentProductListInStore();
		},
		methods: {
			getRecomentProductListInStore() {
				//上拉的状态：0-loading前；1-loading中；2-没有更多了
				if (this.loadingType !== 0) {
					return;
				}
				this.loadingType = 1;
				this.page = this.page + 1;

				uni.request({
					url: this.$API_BASE + `/app/store/getRecomentProductListInStore`,
					method: 'GET',
					dataType: 'json',
					data: {
						page: this.page,
						store_id: this.storeId,
					},
					success: (response) => {
						const res = response.data;
						if (res.success) {
							const data = res.data;
							if (data) {
								this.recomentList = this.recomentList.concat(data);
							}
							if (res.has_more === false) {
								this.loadingType = 2; //2-没有更多了
							} else {
								this.loadingType = 0; //开启新一轮加载
							}
						} else {
							console.log(res.message);
						}
					}
				});
			},
			loadStoreInfo() {
				const api = this.$API_BASE + '/app/store/getStoreInfo';
				uni.request({
					url: api,
					dataType: 'json',
					method: 'GET',
					data: {
						store_id: this.storeId,
					},
					success: (response) => {
						const res = response.data;
						this.storeInfo = res.data;
						this.getDistance(); //计算距离当前位置的距离
					}
				})

			},
			navigateTo(url) {
				uni.navigateTo({
					url: `${url}?store_id=${this.storeId}`
				})
			},
			callTelphone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
			openLocation() {
				uni.openLocation({
					latitude: this.storeInfo.location.latitude,
					longitude: this.storeInfo.location.longitude,
					success: function() {
						console.log('success');
					}
				})
			},
			getDistance() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(JSON.stringify(res));
						const latitude = res.latitude;
						const longitude = res.longitude;
						let dist = mapUtils.getDistance(this.storeInfo.location.latitude, this.storeInfo.location.longitude, latitude,
							longitude);
						this.distance = dist;
					}
				});
			},
			gotoSearch() {
				uni.navigateTo({
					url: 'search'
				})
			}
		},
	}
</script>

<style>

	.store-images-swiper-box,
	swiper,
	swiper-item {
		width: 100%;
		height: 250upx;
	}

	.store-images-img-box {
		width: 100%;
		height: 250upx;
		box-sizing: border-box;
		/* padding: 20upx; */
	}

	.store-images-img {
		width: 100%;
		height: 100%;
		/* background: #4CD964; */
		/* border-radius: 20upx; */
		overflow: hidden;
	}

	.store-images-img image {
		width: 100%;
		height: 100%;
	}
</style>
